<template>
  <p>{{count}}</p>
  <span @click="getName(i,$event)" v-for="i in names">{{i}}</span>
  <button @click="addCount('我是参数')">ADD</button>
  <div></div>
  <h3>事件修饰符</h3>
  <a @click="clickHandler" href="www.baidu.com" >事件修饰</a>
  <a @click.prevent="clickHandler" href="www.baidu.com" >事件修饰</a>

  <div @click="clickHandler">
  <p @click.stop="clickDiv">子级</p>
  </div>
</template>

<script>
export default {
  name: "EventParam",
  data(){
    return{
      count:0,
      names:["dsa","dsad","sdwda"]
    }
  },
  methods:{
    addCount(msg){
      //直接在方法里面传参
      console.log(msg)
    },
    //点击谁就获取谁
    getName(name,e){
      console.log(name)
      e.name="xixixix"
    },
    clickHandler(e){
      e.preventDefault();//阻止默认跳转事件
      console.log("点击了，阻止")
    },
    clickDiv(e){
      e.stopPropagation()//阻止父级也被执行
      console.log("divson is clicked")
    }
  }
}
</script>

<style scoped>

</style>
